DOM (Document Object Model) ম্যানিপুলেশন

DOM (Document Object Model) কি?

DOM (Document Object Model) হল একটি প্রোগ্রামিং ইন্টারফেস যা HTML বা XML ডকুমেন্টগুলিকে এক্সেস এবং ম্যানিপুলেট করার জন্য ব্যবহৃত হয়। এটি একটি ডকুমেন্টের কাঠামোকে অবজেক্ট হিসেবে তৈরি করে এবং ডকুমেন্টের বিভিন্ন উপাদানকে প্রোগ্রামিং ভাষায় অ্যাক্সেস করতে সহায়তা করে। ওয়েব ডেভেলপমেন্টে JavaScript ব্যবহার করে DOM ম্যানিপুলেশন করা হয়, যার মাধ্যমে HTML পৃষ্ঠার কন্টেন্ট, স্টাইল এবং স্ট্রাকচার পরিবর্তন করা সম্ভব হয়।

DOM ম্যানিপুলেশন কিভাবে কাজ করে?

DOM ম্যানিপুলেশন JavaScript এর মাধ্যমে করা হয়, যেখানে আপনি HTML বা XML ডকুমেন্টের বিভিন্ন উপাদান (যেমন, এলিমেন্ট, অ্যাট্রিবিউট, বা কন্টেন্ট) নির্বাচন এবং পরিবর্তন করতে পারেন। DOM ম্যানিপুলেশন করার মাধ্যমে আপনি ওয়েব পৃষ্ঠার ইন্টারঅ্যাকটিভিটি এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে পারেন।

DOM ম্যানিপুলেশনের মৌলিক কৌশল

DOM ম্যানিপুলেশন করতে কিছু সাধারণ JavaScript মেথড এবং প্রপার্টি রয়েছে, যা নিম্নলিখিতভাবে ব্যবহার করা হয়:

১. এলিমেন্ট সিলেকশন (Element Selection)

HTML ডকুমেন্টের যে কোনো এলিমেন্টকে সিলেক্ট করার জন্য JavaScript ব্যবহার করা হয়। এর জন্য বিভিন্ন মেথড রয়েছে, যেমন:

• getElementById(): একটি নির্দিষ্ট আইডি দ্বারা এলিমেন্ট সিলেক্ট করে।

  var element = document.getElementById("myElement");
  

• getElementsByClassName(): একটি ক্লাস নাম দিয়ে একাধিক এলিমেন্ট সিলেক্ট করে।

  var elements = document.getElementsByClassName("myClass");
  

• getElementsByTagName(): একটি ট্যাগ নাম দিয়ে এলিমেন্ট সিলেক্ট করে।

  var elements = document.getElementsByTagName("div");
  

• querySelector(): CSS সিলেক্টর ব্যবহার করে একক এলিমেন্ট সিলেক্ট করে।

  var element = document.querySelector(".myClass");
  

• querySelectorAll(): CSS সিলেক্টর ব্যবহার করে একাধিক এলিমেন্ট সিলেক্ট করে।

  var elements = document.querySelectorAll("p");
  

২. এলিমেন্টের কন্টেন্ট পরিবর্তন (Modifying Element Content)

DOM ম্যানিপুলেশনে একটি এলিমেন্টের কন্টেন্ট পরিবর্তন করতে JavaScript ব্যবহার করা হয়। সাধারণত, innerHTML, textContent বা value প্রপার্টি ব্যবহার করে কন্টেন্ট পরিবর্তন করা হয়।

• innerHTML: এলিমেন্টের ভিতরের HTML কন্টেন্ট পরিবর্তন করতে ব্যবহৃত হয়।

  document.getElementById("myElement").innerHTML = "নতুন কন্টেন্ট";
  

• textContent: এলিমেন্টের কন্টেন্টের টেক্সট পরিবর্তন করে।

  document.getElementById("myElement").textContent = "নতুন টেক্সট";
  

• value: ইনপুট ফিল্ডের মান পরিবর্তন করতে ব্যবহৃত হয়।

  document.getElementById("myInput").value = "নতুন মান";
  

৩. এলিমেন্টের স্টাইল পরিবর্তন (Modifying Element Style)

DOM ম্যানিপুলেশন দিয়ে HTML এলিমেন্টের স্টাইল পরিবর্তন করা যায়। JavaScript এর মাধ্যমে style প্রপার্টি ব্যবহার করে একটি এলিমেন্টের CSS স্টাইল পরিবর্তন করা যায়।

document.getElementById("myElement").style.color = "red"; // টেক্সটের রং পরিবর্তন
document.getElementById("myElement").style.fontSize = "20px"; // ফন্ট সাইজ পরিবর্তন

এছাড়াও, classList মেথড দিয়ে CSS ক্লাস যোগ, মুছে ফেলাও করা যায়:

document.getElementById("myElement").classList.add("newClass");
document.getElementById("myElement").classList.remove("oldClass");

৪. এলিমেন্ট যোগ/বিরতি (Adding/Removing Elements)

DOM ম্যানিপুলেশন দিয়ে নতুন এলিমেন্ট যুক্ত বা পুরানো এলিমেন্ট মুছে ফেলা যায়। এর জন্য বিভিন্ন মেথড রয়েছে:

• createElement(): নতুন এলিমেন্ট তৈরি করতে ব্যবহৃত হয়।

  var newDiv = document.createElement("div");
  

• appendChild(): একটি নতুন এলিমেন্ট প্যারেন্ট এলিমেন্টের মধ্যে যোগ করতে ব্যবহৃত হয়।

  document.body.appendChild(newDiv);
  

• removeChild(): একটি এলিমেন্ট প্যারেন্ট এলিমেন্ট থেকে মুছে ফেলতে ব্যবহৃত হয়।

  var element = document.getElementById("myElement");
  element.parentNode.removeChild(element);
  

৫. ইভেন্ট লিসেনার (Event Listeners)

DOM ম্যানিপুলেশন দিয়ে ইভেন্টগুলি (যেমন ক্লিক, হোভার, কীবোর্ড ইভেন্ট) হ্যান্ডেল করা যায়। এর জন্য addEventListener() মেথড ব্যবহার করা হয়, যা একটি ইভেন্টের জন্য ফাংশন অ্যাসাইন করে।

উদাহরণ:

document.getElementById("myButton").addEventListener("click", function() {
  alert("বাটন ক্লিক করা হয়েছে!");
});

এখানে, click ইভেন্টের জন্য একটি হ্যান্ডলার ফাংশন অ্যাটাচ করা হয়েছে যা বাটন ক্লিক করলে একটি অ্যালার্ট দেখাবে।

৬. এলিমেন্টের অ্যাট্রিবিউট পরিবর্তন (Modifying Element Attributes)

HTML এলিমেন্টের অ্যাট্রিবিউট পরিবর্তন করার জন্য setAttribute() এবং getAttribute() মেথড ব্যবহার করা হয়।

• setAttribute(): একটি এলিমেন্টের অ্যাট্রিবিউট সেট করতে ব্যবহৃত হয়।

  document.getElementById("myLink").setAttribute("href", "https://www.newurl.com");
  

• getAttribute(): একটি এলিমেন্টের অ্যাট্রিবিউটের মান পড়তে ব্যবহৃত হয়।

  var hrefValue = document.getElementById("myLink").getAttribute("href");
  

সারাংশ

DOM (Document Object Model) ম্যানিপুলেশন ওয়েব ডেভেলপমেন্টের একটি অত্যন্ত গুরুত্বপূর্ণ অংশ। এর মাধ্যমে HTML ডকুমেন্টের কন্টেন্ট, স্টাইল, এবং স্ট্রাকচারকে JavaScript ব্যবহার করে পরিবর্তন করা যায়। DOM ম্যানিপুলেশন ব্যবহার করে আমরা ওয়েব পৃষ্ঠাকে আরও ইন্টারঅ্যাকটিভ, ব্যবহারকারী-বান্ধব এবং ডাইনামিক করতে পারি। DOM এর বিভিন্ন মেথড, যেমন এলিমেন্ট সিলেকশন, কন্টেন্ট পরিবর্তন, স্টাইল পরিবর্তন, এলিমেন্ট যোগ/বিরতি এবং ইভেন্ট হ্যান্ডলিং ব্যবহার করে ওয়েব পৃষ্ঠার কার্যকারিতা এবং সৌন্দর্য বৃদ্ধি করা সম্ভব।